<template>
    <roll>
        <header class="white" flex="cross:center" :style="{'background-image': `url(${bg})`}">
            <div flex="cross:center" class="fitw">
                <img class="arc ml36 mr16" :src="userInfo.head"/>
                <div flex-box="1">
                    <p class="f16 mb4">{{userInfo.nick}}</p>
                    <p class="f14 mb4 rel" flex="cross:center">
                        <i class="iconfont icon-shouji"></i>
                        <span v-if="userInfo.mobile">{{userInfo.mobile}}</span>
                        <router-link :to="{name: 'phoneBind'}" tag="span" class="c2 ml4" v-else>未绑定</router-link>
                        <i class="iconfont icon-ai-code f24 mr20 qr" @click="showHideOnBlur = true"></i>
                    </p>
                    <p class="f14 mb4">
                        积分：{{userInfo.integral}} &nbsp;&nbsp;&nbsp;&nbsp;<span>{{userInfo.groupName}}会员</span></p>
                    <p class="f14">{{gap}}</p>
                </div>
            </div>
        </header>
        <oil-price-plane class="my12" v-if="$g.shopList.length == 1"></oil-price-plane>
        <ul class="menus mb30 clearfix">
            <li v-for="i in list" class="tap white-bg">
                <router-link tag="div" :to="{name: i.routeName}" class="absfit" flex="dir:top main:center cross:center"
                             @click.native="i.click && i.click()">
                    <i class="iconfont f32" :class="i.icon"></i>
                    <p class="f15 mt10">{{i.label}}</p>
                </router-link>
            </li>
        </ul>

        <div v-transfer-dom>
            <x-dialog v-model="showHideOnBlur" class="dialog-demo" hide-on-blur>
                <qrcode :value="userInfo.userCode" type="img" :size="200" class="mt40"></qrcode>
                <!--<p class="text mt6 mb20 f14">扫描二维码或右上角分享转赠</p>-->
                <p class="tc h44 bdt c2 tap mt20" @click="showHideOnBlur = false">关闭窗口</p>
            </x-dialog>
        </div>
    </roll>
</template>
<script>
  import { Qrcode } from 'vux'
  import oilPricePlane from '@/components/PnP/单站油价展示'
  import { scanQRCode } from '@/common/jssdk'
  import { closePop } from '../utils/tiny'

  export default {
    data () {
      this.bg = require('./bg.png')
      return {
        showHideOnBlur: false
      }
    },
    computed: {
      userInfo () {
        return this.$store.getters.userInfo
      },
      list () {
        const scaner = {
          label: '扫码核销',
          icon: 'icon-31saoma color3',
          click: this.openScan
        }

        const spread = {
          label: '专车地推',
          icon: 'icon-ai-code color3',
          routeName: 'specialCar_generalize'
        }

        const list = [{
          label: '一键加油',
          icon: 'icon-fujinyouzhan color1',
          routeName: 'yjjy_xzyz'
        }, {
          label: '个人信息',
          icon: 'icon-gerenxinxi1 color1',
          routeName: 'user_info'
        }, {
          label: '储值卡',
          icon: 'icon-chuzhiqia1 color1',
          routeName: 'petCard'
        }, {
          label: '绑定手机',
          icon: 'icon-shoujibangding1 color2',
          routeName: 'phoneBind'
        }, {
          label: '优惠券',
          icon: 'icon-youhuiquan1 color2',
          routeName: 'coupon'
        }, {
          label: '积分兑换',
          icon: 'icon-jifenjilu1 color2',
          routeName: 'store'
        }, {
          label: '专车认证',
          icon: 'icon-zhuancherenzheng color3',
          routeName: 'specialCar_step1'
        }, {
          label: '支付记录',
          icon: 'icon-zhifujilu color3',
          routeName: 'refuelLog'
        }, {
          label: '积分记录',
          icon: 'icon-jifenjilu1 color3',
          routeName: 'integralLog'
        }, {
          label: '充值记录',
          icon: 'icon-chongzhi color3',
          routeName: 'rechargeLog'
        }, {
          label: '门店导航',
          icon: 'icon-fujinmendian color3',
          routeName: 'storesNavigation'
        }]

        if (this.userInfo.scaner) {
          list.push(scaner)
        }

        if (this.userInfo.spread) {
          list.push(spread)
        }
        list.push({
          label: '更多',
          icon: 'icon-gengduo color3',
          routeName: 'more'
        })
        return list
      },
      // 还差多少积分 升级到 某某会员
      gap () {
        if ($g.memberList.length == 0) return {}
        const integral = this.userInfo.monthIntegral
        const climb = $g.memberList.find(x => x.minIntegral > integral)
        let msg
        if (climb) {
          const gapIntegral = climb.minIntegral - integral
          const gapName = climb.groupName
          msg = `再获取${gapIntegral}积分下月可升级${gapName}会员`
        } else {
          msg = `您已经成为最高会员-${$g.memberList.slice(-1)[0].groupName}会员`
        }
        return msg
      }
    },
    methods: {
      // 打开扫码
      async openScan () {
        const res = await scanQRCode()
        const orderCode = res.resultStr // 当needResult 为 1 时，扫码返回的结果
        this.closeOrder(orderCode)
      },
      // 核销礼品订单
      async closeOrder (orderCode) {
        try {
          let {obj} = await this.$post_loading('order/orderOver', {orderCode})
          if (obj) {
            this.$vux.alert.show({
              title: '恭喜',
              content: '订单核销成功'
            })
          }
        } catch (e) {
          alert(JSON.stringify(e))
        }
      },
      // 关闭弹窗
      closePop () {
        return closePop(this, 'showHideOnBlur')
      }
    },
    components: {Qrcode, oilPricePlane}
  }
</script>
<style type="text/scss" lang="scss" scoped>
    @import '../css/variable.scss';

    header {
        height: 156px;
        background-size: 100%;
        background-position: center;
        img {
            width: 68px;
            height: 68px;
            align-self: flex-start;
        }
        .qr {
            position: absolute;
            right: 0px;
            top: 0;
        }
    }

    .menus {
        li {
            position: relative;
            width: 33.33%;
            float: left;
            border-top: 1px solid $border-tint;
            border-left: 1px solid $border-tint;
            &:before {
                display: block;
                content: '';
                padding-top: 82%;
            }

        }
    }

    .color1 {
        color: #da4746;
    }

    .color2 {
        color: #2e57af;
    }

    .color3 {
        color: #f29418;
    }
</style>
